<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">
  <xi:include href="layout.html" />
  <head>
    <title>Graphical Timeline</title>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $("#select_repo_branch input").hide();
        $("#select_repo_branch select").change(function () {
          this.parentNode.parentNode.submit();
        });

        // Make absolute to have legend over table, but need to keep coordinates
        var offset = $("#legend").offset();
        $("#legend").css("position","absolute").css("left", offset.left).css("top", $("#branch-label").offset().top);

        $("#legend-title").click( function() {
          if($("#legend-colors").css("display") == "none")
            $("#legend-colors").show();
          else
            $("#legend-colors").hide();
        });
      });
    </script>
  </head>
        
  <body>
    <div id="select_repo_branch">
      <ul id="gtimeline-top">
        <li id="select_repo_branch">
          <form class="gtimeline" action="" method="get">
            <div class="buttons">
              <py:if test="len(repos)>1">
                 <label for="repo">Repository:</label>
                 <select id="repo" name="repos">
                 <py:for each="repo in repos">
                     <option py:attrs="{'selected':'selected'} if selected_repo == repo else {}" value="${branch}">${repo if repo else '(default)'}</option>
                   </py:for>
                 </select>
               </py:if>
              <label id="branch-label" for="branch">Branch:</label>
              <select id="branch" name="branch">
                <py:for each="branch in branches">
                  <option py:attrs="{'selected':'selected'} if selected_branch == branch else {}" value="${branch}">${branch if branch else '(default)'}</option>
                </py:for>
              </select>
              <input type="submit" value="Go!" />
            </div>
          </form>
        </li>
        <li id="legend">
          <div><span id="legend-title">Legend</span> (click to show)</div>
          <div id="legend-colors">
            <py:for each="branch in branchColors.keys()">
            <div class="legend-item"><span class="legend-color" style="background-color:${branchColors[branch]};">&nbsp;</span><span>${branch}</span></div>
            </py:for>
          </div>
        </li>
      </ul>
    </div>

    <div style="width:100%">
    <table cellspacing="0" cellpadding="2" border="0" width="100%">
      <tr class="head"><th style="padding-left: ${svg_width}px">Commit log message</th><th style="width: 7em">Date</th><th style="width: 10em">Author</th></tr>
      <tr py:for="index in range(len(tableInfo))" py:attrs="{'class':'alt'} if index % 2 == 1 else {}">
        <?python row = tableInfo[index] ?>
        <td class="desc">
        <py:if test="index == 0">
          <div style="overflow: visible; position:absolute;">
            <embed src="${href.gtimeline('timeline.svg',{'branch':selected_branch})}" width="${svg_width}" height="${svg_height}" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
          </div>
</py:if>
        <div class="desc" style="padding-left: ${svg_width}px"><a href="${href.changeset(row['hex'],selected_repo)}">${row['desc']}</a></div></td>
        <td><div>${row['date']}</div></td>
        <td><div>${row['user']}</div></td>
      </tr>
    </table>
    </div>
  </body>
</html>
